<template>
    <!-- 用户中心-项目发布 -->
    <div class="container mb-40">
        <Breadcrumb :list="['关于我们']" />
        <div class="main">
            <div class="nav">
                <el-card class="box-card" body-style="padding:10px 0">
                    <div v-for="(item, index) in navArr" :key="index" class="text item" @click.native="clickNav(index)"
                        :class="index == dynamic ? 'active' : ''"><a>{{ item }}</a></div>
                </el-card>
            </div>
            <div class="detail">
                <div class="content">
                    <div class="title">
                        <div class="a"></div>
                        <span>章程</span>                        </div>
                    <div class="info">
                        项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容。      项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容。
                        项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容。
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref } from 'vue';
const dynamic = ref(0)
const navArr = ref(["简介", "章程", "架构"])
const clickNav = (index:any) => {
    dynamic.value = index;
}
</script>

<style scoped lang="less">
@import "@/assets/style/common.less";
.container {
    .main {
        overflow: hidden;
        .nav {
            float: left;

            .text {
                font-size: 18px;
                line-height: 60px;
            }

            .item {
                height: 60px;
                text-align: center;
                align-items: center;
            }

            .box-card {
                width: 196px;

                div.active{
                    background-color:#009CF2 ;
                    color: #FFFFFF;
                }
            }
        }

        .detail {
            width: 900px;
            float: right;
            background: #FFFFFF;
            padding: 0 40px 20px 40px;

            .title {
                padding: 40px 0 22px 0;
                span {
                    font-size: 24px;
                    line-height: 30px;
                }
                position: relative;
                .a {
                    width: 6px;
                    height: 24px;
                    line-height: 48px;
                    background: #009CF2;
                    position: absolute;
                    top: 45px;
                    left: -12px;
                  }

            }
            .content {
                .info{
                    font-size: 20px;
                    line-height: 32px;
                    text-indent:2em;
                }
            }

        }
    }
}
</style>
